<template>
  <div>
    <div style="margin-left: 67px">
      <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form">
        <a-form-model-item label="*  来源">
          <div v-for="item in originList" :key="item.code">
            <span v-if="item.code == form.originSource">{{ item.title }}</span>
          </div>
        </a-form-model-item>
        <a-form-model-item label="*  评级">
          {{ form.level == 99 ? '未评级' : form.level == 10 ? 'S级' : form.level == 20 ? 'A级' : form.level == 30 ? 'B级' : '' }}
        </a-form-model-item>

        <div v-if="showFooter">
          <a-form-model-item label="*  上下架状态">
            <a-radio-group v-model="form.status" @change="shelfParameter">
              <a-radio :value="0"> 下架 </a-radio>
              <a-radio :value="1"> 上架 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="*  是否公开">
            <a-radio-group v-model="form.isPublish" @change="shelfParameter">
              <a-radio :value="1"> 公开 </a-radio>
              <a-radio :value="2"> 不公开 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </div>
        <div v-else>
          <a-form-model-item label="*  上下架状态">
            {{ form.status === 0 ? '下架' : '上架' }}
          </a-form-model-item>
          <a-form-model-item label="*  是否公开"> {{ form.isPublish === 1 ? '公开' : '不公开' }} </a-form-model-item>
        </div>
        <a-form-model-item label="*  允许生成海报" prop="isCreateBill">
          {{ form.isCreateBill == 0 ? '否' : '是' }}
        </a-form-model-item>
        <a-form-model-item label="效果图">
          <JImageUpload
            :disabled="true"
            :uploadParams="getUploadParams()"
            :isMultiple="true"
            :fileSize="10"
            :number="10"
            :accept="'image/*'"
            @fileChange="fileImageChange"
            v-model="imgList"
          ></JImageUpload>
          <div class="upload__tip" style="line-height: 16px">图片小于10mb，格式jpg、png，最多10张。建议像素670X720。</div>
        </a-form-model-item>
        <a-form-model-item label="效果视频">
          <JImageUpload
            :disabled="true"
            :uploadParams="getUploadParams()"
            :isMultiple="false"
            :fileSize="300"
            :number="1"
            :accept="'video/*'"
            @fileChange="fileVideoChange"
            v-model="videoList"
          ></JImageUpload>
          <div class="upload__tip" style="line-height: 16px">视频小于300mb</div>
        </a-form-model-item>
        <!-- <template v-for="tag in tags">
          <a-form-model-item style="margin-bottom: 0" :label="tag.title">
            <template v-for="t in tag.children">
              <a-checkable-tag :key="t.code" :checked="form.labelList.indexOf(t.code) > -1" @change="checked => handleTagChange(t.code, checked)">
                {{ t.title }}
              </a-checkable-tag>
            </template>
          </a-form-model-item>
        </template> -->
        <div>
          <div v-for="tag in tags" :key="tag.code">
            <a-form-model-item :label="tag.title">
              <a-tag v-for="t in tag.children" :key="t.code" style="margin: 2px" color="blue" v-if="form.labelList.indexOf(t.code) > -1"> {{ t.title }}</a-tag>
            </a-form-model-item>
          </div>
        </div>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { querySysCateTree } from '@api/box/api'
import globalData from '@/assets/js/common'
import { copyrightList } from '@/api/pos/authority'
import { mixin } from '../mixin'
export default {
  mixins: [mixin],
  components: {
    JImageUpload
  },
  data() {
    return {
      disabled: true,
      form: {
        level: '',
        gender: '',
        originSource: '', // 来源
        isCreateBill: '1',
        videoList: [],
        imgList: [],
        labelList: [],
        coverUrl: '',
        videoUrl: '',
        isPublish: '', //是否公开
        status: '' //上架
      },
      tags: {},
      videoList: [],
      copyrightList: [],
      imgList: [],
      levelInfo: [
        {
          key: '未评级',
          value: '99'
        },
        {
          key: 'S级',
          value: '10'
        },
        {
          key: ' A级',
          value: '20'
        },
        {
          key: ' B级',
          value: '30'
        }
      ],
      originList: []
    }
  },
  props: {
    showFooter: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  created() {
    this.getSysCateTree()
    this.getSysCate()
  },
  methods: {
    // 获取版权
    async getCopyrightList() {
      const param = {
        current: 1,
        size: 100,
        status: 'Y'
      }
      const res = await copyrightList(param)
      if (res.code == 200) {
        this.copyrightList = res.data.records
        console.log(this.copyrightList, ' this.copyrightList')
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    //传参数
    shelfParameter() {
      const shelfParameter = {
        isPublish: this.form.isPublish,
        status: this.form.status
      }
      this.$emit('shelfParameter', shelfParameter)
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileImageChange(list) {
      this.form.imgList = list
    },
    fileVideoChange(list) {
      this.form.videoList = list
      let coverUrl = list.map(item => item.url)
      this.form.coverUrl = coverUrl.map(item => {
        return `${item}?vframe/jpg/offset/1`
      })
      this.form.videoUrl = list.map(item => item.url) // 视频url
    },
    handleTagChange(tag, checked) {
      const { labelList } = this.form
      const nextSelectedTags = checked ? [...labelList, tag] : labelList.filter(t => t !== tag)
      this.form.labelList = nextSelectedTags
    },
    // 标签
    getSysCateTree() {
      querySysCateTree('B08')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = JSON.parse(JSON.stringify(result))
            data.splice(1, 2)
            this.tags = data
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 分类 来源
    getSysCate() {
      querySysCateTree('B10')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = JSON.parse(JSON.stringify(result))

            this.originList = data
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 重置
    reset() {
      this.form = {
        level: '99',
        gender: '',
        originSource: '', // 来源
        isCreateBill: '1',
        videoList: [],
        imgList: [],
        labelList: [],
        shelf: '0',
        isPublish: '', //是否公开
        status: '' //上下架
      }
      this.videoList = []
      this.imgList = []
    },
    // 回显
    setData(value) {
      console.log(value, '通用参数')
      this.form.level = value.level
      this.form.isPublish = value.isPublish //
      this.form.status = value.status == '1' ? 1 : 0 //
      console.log(this.form.status, 'this.form.status')
      this.form.originSource = value.originSource
      this.form.gender = value.gender ? value.gender + '' : ''
      this.form.shelf = value.shelf ? value.shelf + '' : ''
      this.form.isCreateBill = value.isCreateBill.toString()
      this.form.labelList = value.labelList && value.labelList.length > 0 ? value.labelList.map(item => item.labelId) : []
      let imgList = value.galleryList && value.galleryList.length > 0 ? value.galleryList.filter(item => item.type === 0).map(item => item.url) : [] //图片
      let videoList = value.galleryList && value.galleryList.length > 0 ? value.galleryList.filter(item => item.type === 1).map(item => item.url) : [] //视频
      this.imgList = imgList || []
      this.videoList = videoList || []
    },
    submitEvent() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.form, 'form')
          this.$emit('parmeChange', this.form)
        } else {
          console.log('error submit!!')
          this.$emit('parmeChange', false)
          return false
        }
      })
    }
    //过滤数据库
  }
}
</script>
<style scoped lang="less">
.box {
  width: 100px;
  height: 100px;
  margin: 5px;
}
</style>

